/* 导航容器 */  
.nav-container {  
    position: fixed;  
    top: 0;  
    left: 0%;  
    width: 100%;  
    margin: 0 auto;  
    padding: 1rem 2rem;  
    display: flex;  
    justify-content: space-between;  
    z-index: 1000;  
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);  
    background: linear-gradient(135deg, #1e90ff, #0066cc);  
    box-sizing: border-box;  
    backdrop-filter: blur(10px);  
    border-radius: 0;  /* 圆角清除 */  
  }  

  @media (max-width:768px) {  
    .nav-container {  
      width: 100%;  
      left: 0;  
    }  
  }  

 /* 导航按钮组 */  
.nav-buttons {  
    display: flex;  
    flex-direction: column; /* 设置为垂直排列 */
    position: flex;  
    top: 100%;  
    left: 15%;  
    width: 85%;  /* 继承父容器宽度 */  
    background: inherit;  
    padding: 1rem;  
    flex-wrap: wrap;  
    gap: 1rem;  
    max-height: 80vh;  
    overflow-y: auto;  
  } 
  
  /* 移动端适配 */  
  @media (max-width:768px) {  
    .nav-buttons {  
      flex-direction: column;  
    }  
    .nav-buttons li {  
      width: 100%;  
    }  
  }  
  
  /* 按钮排列优化 */  
  .nav-button {  
    width: auto;  
    flex-grow: 1;
    margin: 0.5rem;  
    /* background: rgba(255,255,255,0.15);   */
    background: transparent;
    color: white;  
    border: none;  
    padding: 0.8rem 1.5rem;  
    border-radius: 8px;  
    white-space: nowrap; 
    height: 10px; 
    padding: 0 1.5rem; /* 去掉了上下内边距，只保留左右内边距 */
    text-decoration: underline; /* 添加下划线 */
    list-style-type: none; /* 去掉前面的点，如果.nav-button是li元素的话 */
    display: flex; /* 如果需要使内容在按钮内垂直居中，可以添加此行 */
    align-items: center; /* 与上一行一起使用，使内容垂直居中 */
  }  

  
  /* 展开状态 */  
  .nav-buttons.expanded {  
    display: flex;  
    width: 100%;  /* 继承父容器宽度 */  
    animation: slideDown 0.3s ease;  
  }  
  
  @keyframes slideDown {  
    from { opacity: 0; transform: translateY(-10px) }  
    to { opacity: 1; transform: translateY(0) }  
  }  

  body {
    background: #f0f5ff;
    font-family: 'Segoe UI', sans-serif;
    background: url('/static/img/bg.png') no-repeat center center fixed;  
    background-size: cover;     /* 等比例缩放覆盖全屏 */  
    background-attachment: fixed;  /* 滚动时保持背景固定 */  
}

.nav-logo {
  width: 40px; /* 设置图标宽度 */
  height: 40px; /* 保持图标比例 */
  margin-right: 1rem; /* 与导航按钮之间的间距 */
  /* 其他样式，如垂直对齐等，根据需要添加 */
}

.nav-brand-text {
  margin-left: 0.5rem; /* 控制文字与图片之间的间距 */
  font-size: 1.5rem; /* 控制文字大小 */
  color: #333; /* 控制文字颜色 */
  position: center;  
}

.nav-brand {
  display: flex;  
  justify-content: center; /* 水平居中 */
}